(function(){
   let bannerBox=document.getElementById("bannerBox");//整个轮播图容器
   let w=bannerBox.offsetWidth;//整个容器的宽度，图片宽度
   let wrapper=document.querySelector(".wrapper");//要移送的盒子
   let spanlist=null;//所有的小圆点---循环渲染结束，才获取
   let pagination=document.querySelector(".pagination");//存放小圆点的盒子
   let step=0;//步长
   let count=0;//总图片个数
   let timer=null;//定时器
   let data=null;
   //获取数据(ajax 4)+循环渲染
   function render(){
       let xhr=new XMLHttpRequest;
       xhr.open("GET","data.json",false);
       xhr.onreadystatechange=function(){
         if(xhr.readyState===4&&xhr.status===200){
            data=JSON.parse(xhr.response);
         }
       }
       xhr.send()

       let str="";
       let str2="";
       data.forEach((item,index)=>{//0,1,2,3,4,5
          str+=`<div class="slide">
             <img src="${item.pic}" alt="">
          </div>`
          str2+=`<span class="${index==step?'active':''}" index="${index}"></span>`
       })
       //除了拼接5张图片外，还要重复第一幅图片---》6
       str+=`<div class="slide">
               <img src="${data[0].pic}" alt="">
            </div>`
      wrapper.innerHTML=str;
      pagination.innerHTML=str2;

      count=data.length+1;//总的图片个数 修改为6
      spanlist=document.querySelectorAll(".pagination span");//重新查找小圆点
      
   }
   render()


   function autoPlay(){
      step++;
      if(step>count-1){//1.如果是最后一幅重复的,无动画，回到第一幅
         step=0;
         wrapper.style.transitionDuration="0s";//无动画
         wrapper.style.left=`-${step*w}px`;//回到第一幅
         //设置属性，会统一执行完设置，统一更新渲染队列
         //获取属性，会立刻更新渲染队列
         bannerBox.offsetWidth
         //2. 由第一幅图片，动画进入第二图
         step=1;//进入第二图
         wrapper.style.transitionDuration="0.3s";//有动画
      }
      wrapper.style.left=`-${step*w}px`;//-0*1000 0  -1*1000 -1000
      showCricle();
   }

   //每隔1000ms要移送盒子
   timer=setInterval(autoPlay, 1000);

   //移入盒子停止定时器
   //mouseenter(移入)  mouseleave(移出)---没有冒泡
   //mouseover(移入)   onmouseout(移出)---有冒泡
   bannerBox.onmouseenter=function(){
        clearInterval(timer);
        timer=null;
   }
   //移出盒子 重新开启定时器
   bannerBox.onmouseleave=function(){
      timer=setInterval(autoPlay, 1000);
   }

   function showCricle(){
      //不能直接修改 step,全局都在使用step
      //声明一个变量temp 复制一般step,直接改temp
      let temp=step;
      if(temp===count-1){//如果temp 3---0
         temp=0;
      }

      spanlist.forEach((item,index)=>{
         //如果index等于step, 0--0  1--1  2--2
         //给span添加className="active"
          if(index===temp){
            item.className="active";
          }else{
            item.className="";
          }
      })
   } 


   //绑定事件---事件委托  将事件绑定，委托给祖先级元素，减少事件的绑定，提高性能
   bannerBox.onclick=function(e){
      // console.log(e.target);//目标元素
      // console.log(e.target.tagName);//目标元素--标签名 大写

      if(e.target.tagName==="SPAN"){//小圆点
         let index=e.target.getAttribute("index");//找到小圆点的索引
         //如果是index和step值一样,就不做操作
         //如果 step 为3, index为0，就不做操作
         if(step==index||(step==count-1&&index==0)){
            return;
         }
         step=+index;//修改步长 步长等于index
         wrapper.style.left=`-${w*step}px`;//根据步长设置位置
         showCricle()//展示小圆点
      }

      if(e.target.className.includes("prev")){//上一个
         step--;
         if(step<0){//1.由第一幅无动画，立刻回到最后一幅
            step=count-1;
            wrapper.style.transitionDuration="0s";//无动画
            wrapper.style.left=`-${w*step}px`;//最后一幅

            wrapper.offsetHeight;//获取属性，刷新一次队列
  
            //2. 有倒数第一副---》倒数第二幅（有动画）
            step=count-2;
            wrapper.style.transitionDuration="0.3s";//有动画
         }
         wrapper.style.left=`-${w*step}px`;//-3*1000  -2*1000
         showCricle()
      }
      if(e.target.className.includes("next")){//下一个
         autoPlay();
      }
   }
})()